<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.bg {
				background-color: black;
			}
		</style>
	</head>
	<body>
		<div class="one twi">
		</div>
		<button type="button">开关等</button>
		<script type="text/javascript">
			//classList返回元素的类名
			var div = document.querySelector('div');
			//1.classList返回类名数组  (伪数组)
			console.log(div.classList);
			//2.转换成真数组
			console.log(Array.prototype.slice.call(div.classList));
			//3.添加类名,实在后面追加类名,不会覆盖原有的类名(注意:不需要加.)
			div.classList.add('three');
			//4.移除类名
			div.classList.remove('one');
			//5.切换类名
			var btn = document.querySelector('button');
			btn.addEventListener('click', function() {
				//有bg类就去掉bg类, 没有bg类就添加bg类
				document.body.classList.toggle('bg');
			})
		</script>
	</body>
</html>
